<template>
    <div class="app">
        <div class="gdt">
            <el-carousel :interval="2000" type="card" height="40vw">
                <el-carousel-item v-for="(item, index) in urls" :key="index">
                    <img v-bind:src="item.url" style="width: 100%;height: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="dh2">
            <el-link :underline=false class="el_li_2" icon="el-icon-setting" @mouseenter.native="index=0">盛达资源</el-link>
            <div class="conn1" v-if="index==0" @mouseleave.naive="index=0">
                <div style="width: 1200px; height: 500px; margin: auto">
                    <div class="conn_lf">
                        <h1>盛达资源</h1>
                        <span style="font-family:FangSong_GB2312;">多年来，承蒙社会各界人士的关心和帮助，盛达集团凭借自己的勇气、信念和毅力，励精图治，艰苦创业，走过了一条坚实执着的发展之路，构建起矿业开发、地产文旅、酒类文化、金融资管、医疗健康等产业板块组成的多元化大型实业集团，取得了令人瞩目的业绩。</span>
                    </div>
                    <div id="conn_rt_1"></div>
                </div>
            </div>
            <el-link :underline=false class="el_li_2" icon="el-icon-view" @mouseenter.native="index=1">金融投资</el-link>
            <div class="conn1" v-if="index==1" @mouseleave.naive="index=0">
                <div style="width: 1200px; height: 500px; margin: auto">
                    <div id="conn_rt_2"></div>
                    <div class="conn_rt">
                        <h1>金融投资</h1>
                        <span style="font-family:FangSong_GB2312;">多年来，承蒙社会各界人士的关心和帮助，盛达集团凭借自己的勇气、信念和毅力，励精图治，艰苦创业，走过了一条坚实执着的发展之路，构建起矿业开发、地产文旅、酒类文化、金融资管、医疗健康等产业板块组成的多元化大型实业集团，取得了令人瞩目的业绩。</span>
                    </div>
                </div>
            </div>
            <el-link :underline=false class="el_li_2" icon="el-icon-office-building">盛达地产</el-link>
            <el-link :underline=false class="el_li_2" icon="el-icon-document-add">健康医疗</el-link>
            <el-link :underline=false class="el_li_2" icon="el-icon-cpu">贵金属文创</el-link>
            <el-link :underline=false class="el_li_2" icon="el-icon-goblet-square-full">酒类文化</el-link>
        </div>
        <div style="border: green solid 1px ;height: 400px; margin-top: 550px">

        </div>
    </div>
</template>

<script>
    export default {
        name: 'WrjOne',
        data() {
            return {
                urls: [
                    {url: require('@/assets/dichan/dichan1.jpeg')},
                    {url: require('@/assets/dichan/dichan2.jpeg')},
                    {url: require('@/assets/dichan/dichan3.webp')},
                    {url: require('@/assets/dichan/dichan4.webp')},
                    {url: require('@/assets/dichan/dichan5.png')},
                    {url: require('@/assets/dichan/dichan6.jpeg')},
                ],
                index:0,
            }
        },
    }

</script>

<style scoped>
    .app {
        font-family: "微软雅黑";
    }

    .dh2 {
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .dh2 li {
        height: 30px;
    }

    .el_li_2 {
        font-size: 20px;
        height: 80px;
        width: 200px;
    }

    .el_li_2:hover {
        background-image: url("../../assets/li_hover.png");
        z-index: 1;
        color: #ffffff;
    }
    .conn1{
        background-color: rgb(240, 240, 240);
        font-size: 16px;
        width: 99%;
        height: 500px;
        position: absolute;
        justify-content:center;
        display: flex;
    }

    .conn_lf{
        float: left;
        width: 35%;
        height: 100%;
        padding-top: 50px;
        text-align: left;
    }
    .conn_lf >h1{
        font-size: 38px;
        color: #e50006;
        line-height: 38px
    }
    #conn_rt_1{
        float: right;
        margin-top: 70px;
        width: 60%;
        height: 70%;
        background-image: url("../../assets/dh2/dh2_1.jpeg");
        background-size: 100% 100%;
    }
    .conn_rt{
        float: right;
        width: 35%;
        height: 100%;
        padding-top: 50px;
        text-align: left;
    }
    .conn_rt >h1{
        font-size: 38px;
        color: #e50006;
        line-height: 38px
    }
    #conn_rt_2{
        float: left;
        margin-top: 70px;
        width: 60%;
        height: 70%;
        background-image: url("../../assets/dh2/dh2_2.jpeg");
        background-size: 100% 100%;
    }
</style>